<template>
    <div class="rank">
        <div class="r-head">
            <div class="r-search">
                <div class="switch" v-if="raceDetail.type === 1 && raceDetail.format !== 0">
                    <n-switch @click="changePerson" :default-value="true" :rail-style="railStyle">
                        <template #checked> 团队排名 </template>
                        <template #unchecked> 个人排名 </template>
                    </n-switch>
                </div>
                <n-input v-model:value="rankParams.searchValue" type="text" placeholder="请输入名称" round>
                    <template #suffix>
                        <i class="iconfont icon-sousuo"></i>
                    </template>
                </n-input>
            </div>
            <div class="r-do">
                <div class="r-deploy">
                    <n-popover placement="left" trigger="click">
                        <template #trigger>
                            <n-button size="small" style="grid-area: 3 / 1 / 4 / 2">
                                <template #icon>
                                    <i class="iconfont icon-shezhi2"></i>
                                </template>
                                榜单设置
                            </n-button>
                        </template>
                        <div class="large-text">
                            <div class="show">
                                打星用户<n-switch v-model:value="showStar" size="small" />
                            </div>
                            <div class="show">
                                自动刷新
                                <n-popover trigger="hover">
                                    <template #trigger>
                                        <n-switch v-model:value="showAuto" size="small" />
                                    </template>
                                    <span>每10s一次</span>
                                </n-popover>
                            </div>
                        </div>
                    </n-popover>
                </div>
                <div class="r-flash">
                    <n-button type="primary" size="small" round @click="falshRank">
                        <template #icon>
                            <i class="iconfont icon-shuaxin"></i>
                        </template>
                        刷新
                    </n-button>
                </div>
            </div>
        </div>
        <n-spin :show="showSpin" style="--n-opacity-spinning: 0">
            <div class="r-body">
                <racePersonRank v-if="(typeOfRace === 1 || isPerson) && formtOfRace === 1
                    " ref="raceR" :rankName="raceDetail.rankShowName" :showAuto="showAuto" :showStar="showStar"
                    :rankParams="rankParams" :awardConfig="awardConfig" :location="location"></racePersonRank>
                <raceTeamRank v-if="typeOfRace === 2 &&
                    !isPerson && formtOfRace === 1
                    " ref="raceR" :rankName="raceDetail.rankShowName" :showAuto="showAuto" :showStar="showStar"
                    :rankParams="rankParams" :location="location" :awardConfig="groupConfig"></raceTeamRank>
                <raceAcmPersonRank v-if="(typeOfRace === 1 || isPerson) && formtOfRace === 2
                    " ref="raceR" :rankName="raceDetail.rankShowName" :showAuto="showAuto" :showStar="showStar"
                    :rankParams="rankParams" :awardConfig="awardConfig" :location="location">
                </raceAcmPersonRank>
                <raceAcmTeamRank v-if="typeOfRace === 2 && !isPerson && formtOfRace === 2" ref="raceR"
                    :rankName="raceDetail.rankShowName" :showAuto="showAuto" :showStar="showStar"
                    :rankParams="rankParams" :awardConfig="groupConfig" :location="location">
                </raceAcmTeamRank>
                <raceTianTiPersonRank v-if="(typeOfRace === 1 || isPerson) && formtOfRace === 3
                    " ref="raceR" :rankName="raceDetail.rankShowName" :showAuto="showAuto" :showStar="showStar"
                    :rankParams="rankParams" :awardConfig="awardConfig" :location="location" :tiantiStage="tiantiStage">
                </raceTianTiPersonRank>
                <raceTianTiTeamRank v-if="typeOfRace === 2 && !isPerson && formtOfRace === 3" ref="raceR"
                    :rankName="raceDetail.rankShowName" :showAuto="showAuto" :showStar="showStar"
                    :rankParams="rankParams" :awardConfig="awardConfig" :location="location" :tiantiStage="tiantiStage">
                </raceTianTiTeamRank>
            </div>
        </n-spin>

    </div>
</template>

<script setup>
import { onMounted, watch, defineProps, toRefs, reactive, ref, defineAsyncComponent, } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const racePersonRank = defineAsyncComponent(() =>
    import("@/components/ojComponents/race/rank/racePersonRank.vue")
);
const raceTeamRank = defineAsyncComponent(() =>
    import("@/components/ojComponents/race/rank/raceTeamRank.vue")
);
const raceAcmPersonRank = defineAsyncComponent(() =>
    import("@/components/ojComponents/race/rank/raceAcmPersonRank.vue")
);
const raceAcmTeamRank = defineAsyncComponent(() =>
    import("@/components/ojComponents/race/rank/raceAcmTeamRank.vue")
);
const raceTianTiPersonRank = defineAsyncComponent(() =>
    import("@/components/ojComponents/race/rank/raceTianTiPersonRank.vue")
);
const raceTianTiTeamRank = defineAsyncComponent(() =>
    import("@/components/ojComponents/race/rank/raceTianTiTeamRank.vue")
);
const props = defineProps({
    raceDetail: {
        type: Object,
        default: {}
    }
})

onMounted(() => {
    const auto = localStorage.getItem(`${route.params.rid}ShowAuto`);
  const star = localStorage.getItem(`${route.params.rid}ShowStar`);
  if (auto) {
    if (auto.includes("true")) {
      showAuto.value = true;
    }
  }
  if (star) {
    if (star.includes("true")) {
      showStar.value = true;
    }
  }
})
const route = useRoute()
const router = useRouter()
const { raceDetail } = toRefs(props)
const rankParams = reactive({
    pageSize: 20,
    pageNum: 1,
    searchValue: "",
});
const location = ref(true);
const deboundTime = ref(null);
const showStar = ref(false);
const showAuto = ref(false);
const awardConfig = ref([]);
const groupConfig = ref([]);
const tiantiStage = ref([]);

const isPerson = ref(false);
const showSpin = ref(true)
const changePerson = () => {
    isPerson.value = !isPerson.value;
};
const railStyle = ({ focused, checked }) => {
    const style = {};
    if (!checked) {
        style.background = "#18a058";
        if (focused) {
            style.boxShadow = "0 0 0 2px #18a058";
        }
    } else {
        style.background = "#2080f0";
        if (focused) {
            style.boxShadow = "0 0 0 2px #2080f040";
        }
    }

    return style;
};
const raceR = ref();

const flashRank = () => {
    raceR.value.getRaceRank();
    raceR.value.getRaceProblem();
};
const flash = () => {
    if (document.querySelector(".icon-shuaxin").classList.contains("flash")) {
        return;
    }
    document.querySelector(".icon-shuaxin").classList.add("flash");
};
const noFlash = () => {
    document.querySelector(".icon-shuaxin").classList.remove("flash");
};
const falshRank = () => {
    flash();
    if (deboundTime.value) {
        clearTimeout(deboundTime.value);
    }
    deboundTime.value = setTimeout(() => {
        noFlash();
        raceR.value.getRaceRank();
    }, 880);
};
watch(rankParams, () => {
    raceR.value.getRaceRank();
});
const formtOfRace = ref(-1)
const typeOfRace = ref(-1)
//进行天梯比赛的判断
// formOfRace === 1 时为 oi 或者 ioi赛制
// formOfRace === 2 时为 acm赛制
// formOfRace === 3 时为 天梯赛制
// typeOfRace === 1 时为单人赛
// typeOfRace === 2 时为团队赛
watch(raceDetail.value, () => {
    if (raceDetail.value.accountAwardConfig) {
        awardConfig.value = JSON.parse(raceDetail.value.accountAwardConfig);
    }
    if (raceDetail.value.groupAwardConfig) {
        groupConfig.value = JSON.parse(raceDetail.value.groupAwardConfig);
    }
    if (raceDetail.value.tiantiStageConfig) {
        tiantiStage.value = JSON.parse(raceDetail.value.tiantiStageConfig);
    }
    switch (raceDetail.value.format) {
        case 1:
            formtOfRace.value = 1
            break;
        case 2:
            formtOfRace.value = 1
            break;
        case 0:
            formtOfRace.value = 2
            break;
        case 3:
            formtOfRace.value = 3
            break;
    }
    switch (raceDetail.value.type) {
        case 0:
            typeOfRace.value = 1
            break;
        case 1:
            typeOfRace.value = 2
            break;
    }
    showSpin.value = false
})
watch(showStar, () => {
    localStorage.setItem(`${route.params.rid}ShowStar`, showStar.value);
    raceR.value.getRaceRank();
});
let time = null;
watch(showAuto, () => {
    localStorage.setItem(`${route.params.rid}ShowAuto`, showAuto.value);
    if (showAuto.value) {
        if (time) {
            clearInterval(time);
        }
        time = setInterval(() => {
            raceR.value.getRaceRank();
            raceR.value.getRaceProblem();
        }, 10000);
    } else {
        clearInterval(time);
    }
});

</script>

<style lang="less" scoped>
.manage {
    margin: 10px auto;
}

.v-enter-active,
.v-leave-active {
    transition: opacity 0.3s ease-in-out;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

.r-head {
    display: flex;
    justify-content: space-between;
    align-content: center;
    border-bottom: 1px solid rgb(58, 159, 85);
    padding-bottom: 10px;

    .r-search {
        width: 30%;
        display: flex;
        align-items: center;

        .switch {
            width: 30%;
            margin-left: 10px;
            margin-right: 5px;
        }
    }

    .r-do {
        display: flex;

        .r-deploy {
            margin-right: 10px;

            .n-button {
                --n-height: 31px !important;
                --n-border-radius: 20px !important;
                --n-font-size: 12px !important;
            }

            .large-text {
                padding: 10px;
            }

            .showChart {
                margin-top: 10px;
            }
        }

        .r-flash {
            margin-right: 10px;
        }

        .flash {
            animation: loader 0.88s infinite cubic-bezier(0.3, 0.5, 0.7, 1);
        }

        @keyframes loader {
            0% {
                transform: rotate(0deg);
                filter: hue-rotate(360deg);
            }

            100% {
                transform: rotate(360deg);
                filter: hue-rotate(0deg);
            }
        }
    }
}
</style>